<template>
  <div class="policy_body">
    <div class="head_crumbs clearfix">
      <span class="go_back" @click="goBack">返回</span>
    </div>
    <div class="policy_main" v-if="info">
      <div
        class="title"
        :style="
          info.name.length > 36
            ? info.name.length > 46
              ? info.name.length > 56
                ? info.name.length > 56
                  ? info.name.length > 74
                    ? 'fontSize:16px;'
                    : 'fontSize:18px;'
                  : 'fontSize:24px;'
                : 'fontSize:26px;'
              : 'fontSize:30px;'
            : ''
        "
      >
        {{ info.name }}
      </div>
      <div class="classify">
        <span>发布机构：{{ info.org }}</span>
        <span>发文字号：{{ info.post_num }} </span>
        <span>所属行业：{{ info.industry }} </span>
        <span>发布地区：{{ info.district }}</span>
        <span>发布日期：{{ info.pubdate }}</span>
      </div>
      <div class="division"></div>
      <div :class="['pdf', isFull ? 'isAll' : '']">
        <div v-if="!isFull" class="full" @click="isFull = true">全屏</div>
        <div v-if="isFull" class="exit" @click="isFull = false">退出全屏</div>
        <iframe
          ref="ifRame"
          style="margin-top:30px;"
          :src="info.file"
          frameborder="0"
        ></iframe>
      </div>
      <div class="division"></div>
      <div class="prev_next">
        <p>
          原文链接：
          <strong @click="goTheOriginal(info.url)">{{ info.url }}</strong>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { downFilesBy50, downFilesBy06 } from "@/api/index";
import { policyDetails } from "@api/details";
export default {
  data() {
    return {
      isFull: false,
      activeMenu: "",
      id: null,

      info: {
        name: "",
      },
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.activeMenu = this.$route.params.activeMenu;
    this.$bus.$emit("setActive", this.activeMenu);
    this.getDetail(this.id);
  },
  methods: {
    async getDetail(id) {
      let res = await policyDetails({ id });
      this.info = res;
      // this.downFile(this.info.file);
    },
    async downFile(res) {
      console.log(res);
      let url = res.replace("http:/39.100.39.50:8006", "");
      let fileName = url.split("/")[url.split("/").length - 1];
      console.log(fileName);
      let BoldFile = await downFilesBy06(url);
      console.log(BoldFile);
      let url1 = window.URL.createObjectURL(new Blob([BoldFile]));
      // 生成一个a标签
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url1;
      console.log(url1);
      // 生成时间戳
      link.download = `项目档案.zip`;
      document.body.appendChild(link);
      link.click();
    },
    goBack() {
      this.$router.go(-1);
    },
    goTheOriginal(url) {
      window.open(url);
    },
  },
};
</script>

<style lang="less" scoped>
.policy_body {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  overflow: hidden;
  .policy_main {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 30px 110px 20px;
    width: 1700px;
    height: calc(100% - 60px);
    background: #fff;
  }
}
.head_crumbs {
  box-sizing: border-box;
  width: 1700px;
  margin: 0 auto;
  padding: 11px 100px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  & > span {
    float: left;
    cursor: pointer;
    line-height: 38px;
  }
  .go_back {
    float: right;
    width: 100px;
    height: 38px;
    line-height: 38px;
    background: #5889dc;
    border-radius: 4px;
    color: #fff;
    text-align: center;
  }
}

/deep/ .el-breadcrumb {
  float: left;
}
/deep/ .el-breadcrumb__item {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 38px;
}
/deep/ .el-breadcrumb__inner.is-link {
  font-weight: 400;
  color: #999;
}
/deep/ .el-breadcrumb__item .el-breadcrumb__inner,
.el-breadcrumb__item .el-breadcrumb__inner a,
.el-breadcrumb__item .el-breadcrumb__inner a:hover,
.el-breadcrumb__item .el-breadcrumb__inner:hover {
  color: #999;
  cursor: pointer;
}
.title {
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 34px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #0043b3;
  cursor: pointer;
}
.classify {
  height: 24px;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  cursor: pointer;
}
.division {
  margin: 20px 0;
  height: 0px;
  border: 1px dashed #cccccc;
}
.pdf {
  flex: 1;
  position: relative;
  width: 100%;
  height: 460px;
  z-index: 999;
  iframe {
    margin-top: 0 !important;
    width: 100%;
    height: 100%;
  }
  .full {
    position: absolute;
    top: 70px;
    right: 40px;
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    cursor: pointer;
  }
  .exit {
    position: absolute;
    top: 70px;
    right: 40px;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    border-radius: 10px;
    cursor: pointer;
  }
}
.isAll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.prev_next {
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  text-align: left;
  cursor: pointer;
  strong {
    color: #0043b3;
  }
}

@media only screen and (width: 1366px) {
  .policy_body {
    .policy_main {
      width: 100%;
    }
  }
  .head_crumbs {
    width: 100%;
  }
}
@media screen and (min-width: 1366px) and (max-width: 1600px) {
  .policy_body {
    .policy_main {
      width: 100%;
    }
  }
  .head_crumbs {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
  }
  .prev_next {
    height: 20px;
    font-size: 16px;
  }
  .title {
    font-size: 26px;
  }
  .classify {
    font-size: 16px;
  }
  /deep/ .el-breadcrumb__item {
    font-size: 16px;
  }
  .head_crumbs .go_back {
    height: 30px;
    line-height: 30px;
  }
  .policy_body .policy_main {
    padding: 15px 110px 15px;

    // overflow-y: auto;
  }
}
@media screen and (max-width: 1200px) {
  .policy_body {
    .policy_main {
      width: 100%;
    }
  }
  .head_crumbs {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
  }
  .prev_next {
    height: 20px;
    font-size: 16px;
  }
  .title {
    font-size: 14px !important;
  }
  .classify {
    font-size: 12px;
  }
  /deep/ .el-breadcrumb__item {
    font-size: 16px;
  }
  .head_crumbs .go_back {
    height: 30px;
    line-height: 30px;
  }
  .policy_body .policy_main {
    overflow-y: auto;
  }
}
</style>
